<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态详情</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .page-content { 
            padding: 20px; 
            padding-top: 50px; /* Space for the header */
            padding-bottom: 70px; /* Space for comment bar/nav */
        }
        .back-header { 
            background-color: white; 
            padding: 10px 15px; 
            border-bottom: 1px solid #eee; 
            font-weight: 500; 
            display: flex; 
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 99;
        }
        .back-header a { 
            text-decoration: none; 
            color: #007aff; 
            margin-right: 15px; 
            font-size: 20px;
            line-height: 20px;
        }
        .post-meta {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        .author-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #007aff;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 10px;
        }
        .author-info strong { display: block; font-size: 14px; }
        .author-info span { font-size: 12px; color: #999; }
        .post-title { font-size: 22px; font-weight: 600; margin-bottom: 15px; text-align: left; }
        .comment-item { border-top: 1px solid #eee; padding: 10px 0; text-align: left; }
        .comment-item p { margin: 0; font-size: 14px; }
        .comment-meta { font-size: 12px; color: #999; margin-top: 3px; }

        .comment-input-bar {
            position: fixed;
            bottom: 55px; /* Above the bottom nav */
            left: 0;
            right: 0;
            display: flex;
            padding: 10px 15px;
            background-color: white;
            border-top: 1px solid #eee;
            z-index: 10;
        }
        .comment-input-bar input {
            flex-grow: 1;
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 20px;
            outline: none;
            margin-right: 10px;
        }
        .comment-input-bar button {
            background-color: #007aff;
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 15px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="back-header">
        <a href="javascript:history.back()">&#x2190;</a>
        动态详情
    </div>
    <div class="container">
        <div class="page-content">
            <div class="post-title">标题名称标题名称标题名称：绝美景区的深度游攻略！</div>
            
            <a href="user_detail.html" class="post-meta" style="text-decoration: none; color: inherit;">
                <div class="author-icon">A</div>
                <div class="author-info">
                    <strong>作者</strong>
                    <span>2024/03/25 发布 | 98 收藏</span>
                </div>
            </a>
            
            <div class="content-placeholder" style="height: 250px; margin-top: 15px;">动态内容图片/视频区域</div>
            
            <p style="text-align: left; line-height: 1.6;">
                这是动态的详细文本内容。这个景区真的太值得一去了，我在这里待了三天两夜，给大家总结了一份超全攻略。
                记得带防晒霜和舒适的鞋子！
            </p>
            
            <h2 style="margin-top: 30px; text-align: left;">评论区 (5)</h2>
            <div class="comment-list">
                <div class="comment-item">
                    <p><strong>用户A：</strong> 谢谢楼主的分享！我已经收藏了！</p>
                    <div class="comment-meta">1小时前</div>
                </div>
                <div class="comment-item">
                    <p><strong>用户B：</strong> 景色真不错，想知道具体位置在哪里？</p>
                    <div class="comment-meta">3小时前</div>
                </div>
            </div>
        </div>
    </div>

    <div class="comment-input-bar">
        <input type="text" placeholder="写下你的评论...">
        <button>发送</button>
    </div>

    <div class="bottom-nav">
        </div>
</body>
</html>